<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    canvas{border: solid 1px black;}
  </style>
</head>
<body>
  <canvas id="cvs" width="400" height="400"></canvas>
</body>
<script>

  const cvs = document.querySelector("#cvs");
  const c2d = cvs.getContext("2d");

  c2d.moveTo(100, 100);
  c2d.lineTo(300, 100);
  c2d.lineTo(300, 300);
  c2d.lineTo(100, 300);

  c2d.moveTo(150, 150);
  c2d.lineTo(150, 250);
  c2d.lineTo(250, 250);
  c2d.lineTo(250, 150);

  c2d.lineWidth = 10;
  c2d.stroke();
  
  c2d.fill();

  // =======

  // c2d.moveTo(100, 100);
  // c2d.lineTo(100, 300);
  // c2d.lineTo(300, 300);
  // c2d.lineTo(300, 100);

  // c2d.moveTo(150, 150);
  // c2d.lineTo(150, 250);
  // c2d.lineTo(250, 250);
  // c2d.lineTo(250, 150);

  // c2d.lineWidth = 10;
  // c2d.stroke();

  // c2d.fill();



  
</script>
</html>